<!--
 * @Author: Mr.Sen
 * @LastEditTime: 2021-02-22 19:34:02
 * @Description: 
 * @Website: https://grimoire.cn
 * @Copyright (c) Mr.Sen All rights reserved.
-->
{%extends "root.html" %}

{% block mainbody %}
<link rel="stylesheet" type="text/css" href="../static/css/vditor.css" />
<style>
	/* .vditor-reset {
		color: var(--textColor) !important;
	} */
</style>
<div id="vditor"></div>

<div class="toggleBtnForTD iconfont icon-shezhi" onclick="toolDockFunc()"></div>
<div class="toolDock">
	<div style="color: var(--textColor);">是否公开:</div>
	<ul class="ul_box">
		<div class="label_box" id="type">
			<label>
				<input type="radio" name="isPrivate" onclick="isPublic = 'private'" class='radio' value="private"
					checked=true>
				<div>私密</div>
			</label>
			<label>
				<input type="radio" name="isPrivate" onclick="isPublic = 'public'" class='radio' value="public">
				<div>公开</div>
			</label>
		</div>
	</ul>
</div>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vditor/dist/index.css" />
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vditor/dist/index.min.js"></script>
<script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>
<script type="text/javascript">
	let toolDock = document.querySelector(".toolDock");
	let toggleBtnForTD = document.querySelector(".toggleBtnForTD");

	function toolDockFunc() {
		if (toolDock.attributes.class.nodeValue == "toolDock") {
			toolDock.setAttribute("class", "toolDock toolDock-display");
			toggleBtnForTD.setAttribute("class", "toggleBtnForTD toggleBtnForTD-display iconfont icon-shezhi");
		} else {
			toolDock.setAttribute("class", "toolDock");
			toggleBtnForTD.setAttribute("class", "toggleBtnForTD iconfont icon-shezhi")
		}
	}
</script>
<style>
	.toggleBtnForTD {
		position: fixed;
		right: -30px;
		top: calc(42vh - 110px);
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background-color: #fff;
		box-shadow: 0 0 0 2px #ccc;
		cursor: pointer;
		transition: right .4s;
		text-align: center;
		/* text-justify: auto; */
		line-height: 60px;
		font-size: 30px;
		z-index: 2;
	}

	/* .toggleBtnForTD:hover {
		width: 80px;
		height: 80px;
		transform: translateY(-10px);
		line-height: 80px;
	} */
	.toolDock {
		position: fixed;
		top: 0;
		width: calc(20vw - 70px);
		height: calc(69vh - 122px);
		/* background-color: rebeccapurple; */
		/* right: calc(-20vw - 40px); */
		/* right: -30vw; */
		right: calc(20px - 20vw);
		z-index: 1;
		/* transform: translateX(calc(20vw + 40px)); */
		/* box-shadow: 0 0 0 2px #ccc; */
		border:1px solid #d1d5da;
		padding: 20px;
		transition: right .4s;
		background-color: #fff;
	}

	.toolDock-display {
		/* transform: translateX(0) !important; */
		right: 0;

	}

	.toggleBtnForTD-display {
		/* transform: translateX(calc(30px - 20vw)), translateY(-10px) !important; */
		right: calc(20vw - 70px);
		animation: dh  3s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}

	@media only screen and (max-width:768px) {
		.toggleBtnForTD{
			top: calc(42vh - 30px);
		}
		.toolDock {
			top: 8vh;
			width: 50vw ;
			right: -70vw
		}
		.toolDock-display {
			right: 0;
		}
		.toggleBtnForTD-display {
			right: calc(50vw + 20px);
		}

	}
</style>
<script type="text/javascript">
	var toolbar;
	if (document.body.clientWidth > 768) {
		toolbar = [
			"emoji", "headings", "bold", "italic", "strike", "link", "|", "list", "ordered-list", "check", "|", "quote",
			"line", "code", "inline-code", "table", "|", "export", "fullscreen", "preview", "edit-mode", "|",
		];
	} else {
		toolbar = [
			"emoji", "headings", "bold", "italic", "strike", "link", "|",
		]
	}

	toolbar.push({
		name: "save",
		tip: "保存",
		tipPosition: "n",
		icon: '<svg t="1611116971041" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2849" width="200" height="200"><path d="M1009.371429 168.228571L848.457143 7.314286s-14.628571-7.314286-21.942857-7.314286H36.571429C14.628571 0 0 14.628571 0 36.571429v943.542857c0 29.257143 14.628571 43.885714 36.571429 43.885714h943.542857c21.942857 0 36.571429-14.628571 36.571428-36.571429V197.485714c7.314286-7.314286 7.314286-21.942857-7.314285-29.257143zM680.228571 65.828571v380.342858H270.628571V65.828571h409.6z m277.942858 892.342858H65.828571V65.828571h138.971429v402.285715c0 29.257143 21.942857 51.2 51.2 51.2h446.171429c29.257143 0 51.2-21.942857 51.2-51.2V65.828571h65.828571l138.971429 138.971429v753.371429zM256 680.228571c-14.628571 0-36.571429 14.628571-36.571429 36.571429s14.628571 36.571429 36.571429 36.571429h438.857143c21.942857 0 36.571429-14.628571 36.571428-36.571429s-14.628571-36.571429-36.571428-36.571429h-438.857143z" p-id="2850"></path></svg>',
		hotkey: "⌘/ctrl-s",
		// settings:["inline-code", "table"],
		click() {
			saveContent();
		}
	},
		{
			name: "more",
			tip: "更多",
			tipPosition: "n",
			icon: '<svg t="1611126217404" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7181" width="200" height="200"><path d="M227.652372 417.217287c-52.257178 0-94.782713 42.524512-94.782714 94.782713 0 52.257178 42.525536 94.782713 94.782714 94.782713 52.256154 0 94.782713-42.525536 94.782713-94.782713-0.001023-52.258201-42.526559-94.782713-94.782713-94.782713z m284.346093 0c-52.256154 0-94.78169 42.524512-94.78169 94.782713 0 52.257178 42.525536 94.782713 94.78169 94.782713 52.257178 0 94.783737-42.525536 94.783737-94.782713 0-52.258201-42.526559-94.782713-94.783737-94.782713z m284.34814 0c-52.256154 0-94.78169 42.524512-94.78169 94.782713 0 52.257178 42.525536 94.782713 94.78169 94.782713s94.782713-42.525536 94.782713-94.782713c0-52.258201-42.526559-94.782713-94.782713-94.782713z" p-id="7182"></path></svg>',
			toolbar: [
				{
					name: "delete",
					tip: "删除",
					tipPosition: "n",
					icon: "删除这篇文章",
					click() {
						deleteArticle();
					}
				}
			]
		})
	window.vditor = new Vditor("vditor", {
		focus(md) {
			event.preventDefault()
		},
		toolbar,
		fullscreen: {
			index: 9999
		},
		"preview": {
			"markdown": {
				"codeBlockPreview": false,
				"toc": false,
				"sanitize": true,
			}
		},
		mode: "ir",
		width: document.body.clientWidth <= 768 ? "90%" : "60%",
		height: document.body.clientWidth <= 768 ? 320 : document.documentElement.clientHeight * 0.69 - 80,
		outline: {
			"enable": false,
			"position": "left"
		},
		debugger: false,
		typewriterMode: false,
		placeholder: "文章将被保存到 {{metaName}} 分类下",
		settingsConfig: {
			pin: false,
		},
		counter: {
			enable: false,
			type: "markdown",
		},
		cache: {
			enable: false
		},
		tab: "\t",
		// theme: '{{darkMod}}' == 'True' ? "dark" : "classic",
		theme:"classic"
	});
</script>
<script type="text/javascript">
	// console.log('{{darkMod}}')
	var contentId = "{{edit}}"
	axios.interceptors.request.use((config) => {
		config.headers['X-Requested-With'] = 'XMLHttpRequest';
		let regex = /.*csrftoken=([^;.]*).*$/;
		config.headers['X-CSRFToken'] = document.cookie.match(regex) === null ? null : document.cookie.match(regex)[1];
		return config
	});
	var meta = "{{metaId}}";
	var isPublic = "{{isPublic}}";

	initPage() // 初始化渲染页面

	function initPage() {
		// var radios = document.querySelectorAll(".radio")
		// radios.forEach((item) => {
		// 	if (item.value == meta) item.checked = true;
		// })
		if (meta == "0") {
			vditor.setValue("");
			layer.msg("worked 1")
		} else {
			axios.get(
				'/renderEditor/?edit=' + contentId
			).then((response) => {
				vditor.setValue(response.data.content);
			}).catch((err) => {
				console.error(err);
			});
		}
	}

	function saveContent() {
		layer.msg('保存中', {
			icon: 16,
			shade: 0.01,
			anim: 5
		});
		// var title = document.querySelector("#title").value;
		var content = vditor.getValue();

		var data = Qs.stringify({
			"contentId": contentId,
			"content": content,
			"meta": meta,
			// "title": title,
			"isPublic": isPublic,
		});

		axios.post(
			"/upload/article/",
			data,
		).then((response) => {
			// layer.msg(response.data.msg)
			if (response.data.status == 1) {
				layer.msg(response.data.msg, { icon: 1 });
			} else {
				layer.msg(response.data.msg, { icon: 2 });
			}
			if (response.data.status == 1 && (location.href.indexOf("edit=0") != -1)) {
				contentId = response.data.redirect;
			}
		}).catch((err) => {
			layer.msg("发生错误了呢~");
			console.error(err);
		})
	}

	function deleteArticle() {
		layer.confirm('确定要删除这篇文章么？操作不可恢复', {
			btn: ['删除', '取消'] //按钮
		}, function () {
			axios.get("/deleteArticle/?delete=" + contentId).then((response) => {
				layer.msg(response.data.msg);
				location.href = "/"
			})
		}, function () {
			layer.msg("已取消")
		});
	}
</script>

{% endblock %}